import React from 'react';
import { observer } from 'mobx-react';
import { Button, Icon, Popconfirm, Row, Col } from 'antd';
import window from '../../util';
import ReplyItemDetail, { ReplyItemDetailProps } from './reply-item-detail';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
import $ from 'jquery';

export interface ReplyItemProps {
  item: {
    id: string,
    img_path: string,
    replycontent: string,
    replydate: string;
    replytime: string;
    floornum: string;
    replyorname: string;
    replyor: string;
    quotes: ReplyItemDetailProps,
    comments: ReplyItemDetailProps[],
    likeList: any[];
    showEdit: boolean;
    showDelete: boolean;
    aleradyLiked: boolean;
    replyorDept: string;
    replyorDeptName: string;

  };
  edit: (e) => void;
  delete: (e) => void;
  like: (e) => void;
  unlike: (e) => void;
  reference: (data, offset, flag: boolean) => void;
  about: (data, offset, flag: boolean) => void;
  isLast: boolean;
}

@observer
export default class ReplyItem extends React.Component<ReplyItemProps, any> {
  render() {
    const {
      img_path, replycontent, replydate, replytime, floornum,
      replyor, replyorname, replyorDept, replyorDeptName, quotes, likeList = [], comments = [],
      showEdit, showDelete, aleradyLiked
    } = this.props.item;
    const dpurl = `/hrm/company/HrmDepartmentDsp.jsp?id=${replyorDept}`;
    let showlike = false;
    let showmore;
    let likeObj = '';
    if (likeList.length > 0) {
      showlike = true;
      for (let i = 0; i < (likeList.length > 5 ? 5 : likeList.length); i++) {
        let obj = likeList[i];
        likeObj += (i == 0 ? '' : ',') + obj.name;
      }
      showmore = (likeList.length > 5 ? ' ... ' + getLabel(126387, '等') + likeList.length + getLabel(127, '人') : ' ') + getLabel(383772, '觉得赞') + '！';
    }
    return (
      <div className="cube-reply-list">
        <div className="content-top">
          <img src={img_path} className="content-text-left-user-img" />
          <Row className="content-user">
            <Col span={10}>
              <div className="content-user-name">
                <a style={{ paddingRight: 10 }} href={`javaScript:openhrm(${replyor})`}
                  onClick={event => window.pointerXY(event)}>{replyorname}</a>
                <a href={dpurl} target="_blank" style={{ whiteSpace: 'pre-wrap' }}>{replyorDeptName}</a>
              </div>
              <div className="content-user-date">
                <span style={{ marginRight: 10 }}>{`${replydate} ${replytime}`}</span>
              </div>
            </Col>
            <Col span={14}>
              <p style={{ lineHeight: '22px', marginTop: 10, color: '#9a9a9a' }}>
                <span className="content-right-btn">
                  <Button>{`#${floornum}`}</Button>
                  {showEdit && <Button icon="edit" onClick={this.onEdit}>{getLabel(93, '编辑')}</Button>}
                  {showDelete &&
                    <Popconfirm title={getLabel(387329, '确定要删除这个评论吗？')} onConfirm={this.onDelete}>
                      <Button icon="delete">{getLabel(91, '删除')}</Button>
                    </Popconfirm>}
                  <Button icon="copy" onClick={this.onReference}>{getLabel(19422, '引用')}</Button>
                  <Button icon="file-text" onClick={this.onAbout}>{getLabel(675, '评论')}</Button>
                  {aleradyLiked ?
                    <Button style={{ color: '#2db7f5' }}
                      title={getLabel(387404, '取消点赞')}
                      onClick={this.onUnlike}>
                      <i className="icon-mode-favour" style={{ marginRight: 6 }} />
                      {`(${likeList.length})`}
                    </Button>
                    :
                    <Button
                      title={getLabel(384393, '点赞')}
                      onClick={this.onLike}>
                      <i className="icon-mode-zan" style={{ marginRight: 6 }} />
                      {`(${likeList.length})`}
                    </Button>

                  }
                </span>
              </p>
            </Col>
          </Row>
        </div>
        <div className="content-bottom">
          <ReplyItemDetail quotes={quotes} />
          <div className="content-right-remark-html" style={{ minHeight: 24 }}
            dangerouslySetInnerHTML={{ __html: `<div class="wea-cube-ckeditor-content">${replycontent}</div>` }} />
          {showlike && <div style={{ marginTop: 5 }}>
            <Icon type="heart-o" />&nbsp;{likeObj}
            {showmore}
          </div>}
          <ReplyItemDetail comments={comments} />
        </div>
      </div>
    )
  }

  onAbout = (e) => {
    e = e || window.event;
    const offsetTop = $(e.target).offset().top;
    const $content = $(e.target).closest('.cube-reply-content');
    let top = offsetTop - $content.offset().top + 30;
    const flag = $content.height() < top + 291;
    if (flag) {
      top = top - 291 - 45;
      top = top >10 ? top: 10;
    }
    this.props.about(this.props.item, { top }, flag);
  }
  onReference = (e) => {
    e = e || window.event;
    const offsetTop = $(e.target).offset().top;
    const $content = $(e.target).closest('.cube-reply-content');
    let top = offsetTop - $content.offset().top + 30;
    const flag = $content.height() < top + 291;
    if (flag) {
      top = top - 291 - 45;
      top = top >10 ? top: 10;
    }
    this.props.reference(this.props.item, { top, right: 60 }, flag);
  }
  onEdit = () => {
    this.props.edit(this.props.item);
  }
  onDelete = () => {
    this.props.delete(this.props.item);
  }
  onLike = () => {
    this.props.like(this.props.item);
  }
  onUnlike = () => {
    this.props.unlike(this.props.item);
  }

}
